<template>
  <div class="f-header">
    <div class="logo">
      <el-icon size="20" class="logo-icon"><ElemeFilled /></el-icon>
      MMS平台
    </div>
    <el-icon size="16" style="margin-left: 44px" class="fold-btn" @click="handleAsideMenu">
      <Fold v-if="isopen" />
      <Expand v-else />
    </el-icon>
    <el-tooltip class="item" effect="dark" content="刷新" placement="bottom">
      <el-icon size="16" class="fold-btn" @click="handleRefresh"
        ><Refresh
      /></el-icon>
    </el-tooltip>
    <div class="user-show">
      <el-tooltip
        class="item"
        effect="dark"
        :content="isFullscreen ? '退出全屏' : '全屏'"
        placement="bottom"
      >
        <el-icon size="16" class="fold-btn" @click="toggle">
          <FullScreen v-if="!isFullscreen" />
          <Aim v-else />
        </el-icon>
      </el-tooltip>
      <el-dropdown class="dropdown" @command="handleCommand">
        <span class="dropdown-span">
          <el-avatar :size="25" :src="$store.state.user.avatar" />
          {{ $store.state.user.username }}
          <el-icon :size="16"><ArrowDown /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="resetPassword">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>

  <!-- 修改密码表单 -->
  <form-drawer ref="formDrawerRef" title="修改密码" :showActions="true" @submit="submit" :destroyOnClose="true">
    <el-form
      ref="formRef"
      :model="passwordForm"
      :rules="rules"
      size="small"
      status-icon
      label-width="80px"
      :inline="false"
    >
      <el-form-item prop="oldpassword" label="旧密码">
        <el-input
          v-model="passwordForm.oldpassword"
          placeholder="请输入旧密码"
        />
      </el-form-item>
      <el-form-item prop="password" label="新密码">
        <el-input
          v-model="passwordForm.password"
          placeholder="请输入新密码"
          show-password
        />
      </el-form-item>
      <el-form-item prop="repassword" label="确认密码">
        <el-input
          v-model="passwordForm.repassword"
          placeholder="请输入确认密码"
          show-password
        />
      </el-form-item>
    </el-form>
  </form-drawer>
</template>
<script setup>
import { useFullscreen } from "@vueuse/core";
import { ref, reactive, readonly, computed } from "vue";
import FormDrawer from "~/components/FormDrawer.vue";
import { updatepassword, logout } from '~/api/manager.js';
import { toast, showModal } from '~/composables/util.js';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

const store = useStore()
const router = useRouter()

// 全屏
const { isFullscreen, enter, exit, toggle } = useFullscreen();

// 刷新
const handleRefresh = () => location.reload();

// 修改密码
const passwordForm = reactive({
    oldpassword: '',
    password: '',
    repassword: ''
})
const formDrawerRef = ref(null);
const formRef = ref(null)
const rules = readonly({
    oldpassword: [
        {
            required: true,
            message: "旧密码不能为空",
            trigger: "blur"
        }
    ],
    password: [
        {
            required: true,
            message: "新密码不能为空",
            trigger: "blur"
        }
    ],
    repassword: [
        {
            required: true,
            message: "确认密码不能为空",
            trigger: "blur"
        },
        {
          validator(rule, value, callback) {
            if (value != passwordForm.password) {
              return callback(new Error('确认密码和新密码一致'))
            }
            callback()
          },
          trigger: "blur"
        }
    ],
})
const submit = () => {
    formRef.value.validate((valid) => {
        if (!valid) return false
        formDrawerRef.value.showLoading()
        updatepassword(passwordForm).then(res => {
            toast("修改密码成功，请重新登陆")
            store.dispatch("logout")
            router.push("/login")
        }).catch(err => {
          formDrawerRef.value.hideLoading()
        })
    })
}
// 头像下拉菜单选中
const handleCommand = (command) => {
  switch (command) {
    case "logout":
      showModal("是否要退出登录").then(() => {
        logout().finally(() => {
          store.dispatch("logout")
          router.push("/login")
          toast("退出登录成功")
        })
      })
      break;
    case "resetPassword":
      formDrawerRef.value.open()
      break;
    default:
      break;
  }
}
// 展开/收起侧边栏
const handleAsideMenu = () => store.commit('handleAsideMenu')
const isopen = computed(() => store.state.asideWidth == "250px")

</script>
<style lang="scss" scoped>
@mixin center() {
  display: flex;
  justify-content: center;
  align-items: center;
}
.f-header {
  width: 100%;
  height: 64px;
  position: fixed;
  background: #4338ca;
  display: flex;
  align-items: center;
  z-index: 100;
  .logo {
    width: 150px;
    @include center;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    .logo-icon {
      margin-right: 6px;
    }
  }
  .fold-btn {
    height: 64px;
    width: 42px;
    cursor: pointer;
    @include center;
    color: #fff;
    margin: 0 4px;
  }
  .fold-btn:hover {
    background: #4f46e5;
  }
  .user-show {
    width: 200px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    right: 0;
    .dropdown {
      height: 64px;
      @include center;
      cursor: pointer;
      .dropdown-span {
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: #fff;
      }
    }
  }
}
// 去除鼠标悬浮时出现黑白边框影响美观
:deep(.el-tooltip__trigger:focus) {
  outline: none;
}
</style>